@mixin generate-theme(
    $jee-bg-primary, // 侧栏背景色
    $jee-bg-light, // 侧栏菜单高亮色
    $jee-bg-dark, // 主题半透明色
    $jee-bg-header, // 顶部背景色
    $jee-top-icon, // 顶部图标色
    $jee-top-font, // 顶部字体色
    $jee-font-primary, // 侧栏菜单字体色
    $jee-font-primary-light, // 侧栏菜单字体高亮色
    $jee-font-second, // 子菜单字体色
    $jee-font-second-light, // 子菜单字体高亮色
    $theme: grayBlue // 主题名称
) {
    .custom-#{$theme}{
        // 基础背景色
        .jee-bg-primary{
            background-color: $jee-bg-primary;
        }
        .jee-bg-light{
            background-color: $jee-bg-light;
        }
        .jee-popover{
          &:hover{
            fill: $jee-bg-light!important;
            color: $jee-bg-light;
            cursor: pointer;
            .el-checkbox__label{
                color: $jee-bg-light;
            }
          }
       }
       .jee-click{
          color: $jee-bg-light;
      }
      .jee-border{
          border:1px solid $jee-bg-light;
      }
        .jee-bg-light-important{
            background-color: $jee-bg-light!important;
            &:active,&:hover{
                opacity: 0.9;
            }
        }
        .jee-bg-header{
            background-color: $jee-bg-header;
        }
        // 基础字体色
        .jee-font-primary{
            color: $jee-font-primary;
        }
        .jee-font-primary-light{
            color: $jee-font-primary-light;
        }
        .jee-font-second{
            color: $jee-font-second;
        }
        .jee-font-second-light{
            color: $jee-font-second-light;
        }
        .jee-font-hover:hover{
            color: $jee-font-second-light;
        }
        // 下拉菜单按钮次级样式
        .jee-button-empty{
            .el-button{
                background-color: #ffffff;
                border-color: $jee-bg-light;
                color: $jee-bg-light;
                .jee-svg-icon{
                    fill: $jee-bg-light!important;
                }
                &:hover{
                    background-color: $jee-bg-light;
                    color: #ffffff;
                    .jee-svg-icon{
                        fill: #ffffff!important;
                    }
                }
            }
        }

        .el-button--default:not(.jee-bg-light-important):not(.el-button--primary){
            border-color: #e8e8e8;
            background-color: #ffffff;
            color: #333333;
            .jee-svg-icon{
                fill: #333333 !important;
            }
            &:hover{
                background-color: $jee-bg-light;
                border-color: $jee-bg-light;
                color: #ffffff;
                .jee-svg-icon{
                    fill: $jee-bg-light !important;
                }
            }
        }
        .el-button--primary:focus{
            background-color: $jee-bg-light;
            border-color: $jee-bg-light;
            &:hover{
                opacity: 0.9;
            }
        }
        .jee-button-plain{
            .el-button{
                background-color: #ffffff;
                border-color: $jee-bg-light;
                color: $jee-bg-light;
                .jee-svg-icon{
                    fill: #333333 !important;
                }
                &:hover{
                    background-color: $jee-bg-light;
                    color: #ffffff;
                    .jee-svg-icon{
                        fill: $jee-bg-light !important;
                    }
                }
            }
        }
        // 多选
        .el-checkbox{
            .is-checked{
                .el-checkbox__inner{
                    border-color: $jee-bg-light !important;
                }
            }
        }
        // // 消息弹窗
        // .el-message{
        //     background-color: #f4f4f5;
        //   }
        // 顶部菜单
        .header-container{
            .jee-svg-icon{
                fill: $jee-top-icon;
            }
            .el-dropdown,
            .jee-top-font{
                color: $jee-top-font;
            }
        }
        // 侧导航菜单
        .jee-sider-menu-item{
            background-color: $jee-bg-primary!important;
            .jee-svg-icon,
            span{
                opacity: 0.7;
            }
            &.is-active,
            &:hover{
                .jee-svg-icon,
                span{
                    opacity: 1;
                }
                background-color: $jee-bg-light!important;
            }
        }
        // 侧导航子级菜单
        .jee-sider-sub-menu-item{
            color: $jee-font-second!important;
            &.is-active,
            &:hover,
            .el-submenu__title:hover {
                color: $jee-font-second-light!important;
            }
            .el-submenu__icon-arrow{
                right: auto;
                left: 136px;
            }
        }
        // 表格操作列的icon
        .el-link:hover:not(.is-disabled){
            .el-link--inner .jee-svg-icon{
                fill: $jee-bg-light;
                color: $jee-bg-light;
            }
        }
        // tabs
        .el-tabs{
            .el-tabs__item:hover{
                .jee-svg-icon{
                    fill: $jee-bg-light;
                }
            }
            .el-tabs__item.is-active{
                .jee-svg-icon{
                    fill: $jee-bg-light;
                }
            }
        }
        //tag
        .el-tag{
            background-color: rgba($jee-bg-light,0.15);
        }
        // tabs-card
        .el-tabs.el-tabs--card{
            >.el-tabs__header{
                .el-tabs__item.is-active{
                    background-color: $jee-bg-light;
                    border-color: $jee-bg-light;
                }
                .el-tabs__item.is-closable .el-icon-close:hover{
                    background-color: $jee-bg-light;
                }
            }
        }
        // 按钮组
        .jee-radio-group .el-radio-button .el-radio-button__inner{
            border-color: $jee-bg-light !important;
        }
        // 联级
        .el-cascader > .el-input-group__prepend.is-focus{
            .el-input__inner{
                border-color: $jee-bg-light !important;
                border-radius: 4px 4px 4px 0;
            }
        }
        // 树
        .el-tree .el-tree-node .el-tree-node__content:hover{
            color: $jee-bg-light;
        }

        // 下拉选择框
        .el-select-dropdown.el-popper{
            .el-select-dropdown__item.hover,
            .el-select-dropdown__item.selected{
                color: $jee-bg-light;
            }
            border-color: $jee-bg-light;
        }
        // 级联
        .el-cascader__dropdown.el-popper{
            .el-cascader-node:not(.is-disabled).selected,
            .el-cascader-node:not(.is-disabled):hover {
                color: $jee-bg-light;
            }
            .el-cascader-node.is-active{
                color: $jee-bg-light;
            }
        }
        .el-cascader{
            .el-input.is-focus{
                .el-input__inner{
                    border-radius: 4px 4px 0 0;
                    border-bottom: none;
                }
            }
        }
        // 弹框关闭按钮
        .el-dialog{
            .el-dialog__header{
                .el-dialog__headerbtn{
                    .el-dialog__close:hover{
                        color: $jee-bg-light;
                    }
                }
            }
        }
        .el-message-box{
            .el-message-box__header{
                .el-message-box__headerbtn{
                    .el-message-box__close:hover{
                        color: $jee-bg-light;
                    }
                }
            }
        }
        .jee-border{
            border-color: $jee-bg-light !important;
            border-width: 1px;
        }
        .jee-color{
            color: $jee-bg-light !important;
            fill:$jee-bg-light !important;
            .jee-svg-icon{
                fill: $jee-bg-light !important;
            }
        }
        .jee-hover-color{
            &:hover{
                color: $jee-bg-light !important;
                .jee-svg-icon{
                    fill: $jee-bg-light !important;
                }
            }
        }
        .jee-hover-color2{
            &:hover{
                color: $jee-bg-light;
                .jee-svg-icon{
                    fill: $jee-bg-light !important;
                }
            }
        }
        .jee-hover-color3{
            &:hover{
                color: $jee-bg-light;
                .jee-svg-icon{
                    fill: $jee-bg-light;
                }
            }
        }
        .jee-hover-fill{
            &:hover{
                fill: $jee-bg-light !important;
                color: $jee-bg-light !important;
            }
        }
        .jee-hover-bg{
            &:hover{
                background-color: $jee-bg-light;
            }
        }
        .jee-hover-border{
            &:hover{
                border-color: $jee-bg-light !important;
            }
        }
        .widget-form-list .ghost{
            border-color: $jee-bg-light !important;
        }
        .jee-hover-border-important{
            &:hover{
                border-color: $jee-bg-light !important;
            }
        }
        .jee-timeline-tail{
            .el-timeline-item__tail{
                border-color: $jee-bg-light;
            }
        }
        // svg icon 双色
        .jee-svg-icon{
            fill: $jee-bg-light;
            color: $jee-bg-light;
            font-size: 16px;
        }
        // svg icon 双色
        .jee-svg-icon-2{
            fill: $jee-bg-light !important;
            color: $jee-bg-dark !important;
            font-size: 16px;
        }
        .jee-btn-empty{
            border: 1px solid $jee-bg-light;
            color: $jee-bg-light;
            &:hover{
                background-color: $jee-bg-light;
            }
        }
        // 输入框后面的选择框
        .jee-input-append-select{
            .el-input-group__append{
                .el-input.is-focus{
                    border-color: $jee-bg-light!important;
                }
            }
            .el-input-group__prepend{
                .el-input.is-focus{
                    border-color: $jee-bg-light!important;
                    border: 1px solid;
                    box-sizing: border-box;
                }
            }
            .el-input__inner:focus + .el-input-group__append{
                .el-input{
                    border-top-color: $jee-bg-light;
                    border-right-color: $jee-bg-light;
                    border-bottom-color: $jee-bg-light;
                }
            }
        }
        // 按钮
        .el-button {
            &.el-button--empty{
                border-color: $jee-bg-light;
                color: $jee-bg-light;
                &:hover{
                    background-color: $jee-bg-light;
                    color: #ffffff;
                    .jee-svg-icon{
                        fill: #ffffff;
                    }
                }
            }
            &.is-plain{
                .jee-svg-icon{
                  fill: #333333;
                }
                &:hover{
                  // color:$jee-bg-light!important;
                  // border-color:$jee-bg-light!important;
                    .jee-svg-icon{
                        fill:  $jee-bg-light!important;
                    }
                }
              }
        }
        .column-text{
          &:hover{
            color:$jee-bg-light!important;
            border-color:$jee-bg-light!important;
          }
        }
        // 输入框
        .el-input{
            .el-input__inner:focus{
                border-color: $jee-bg-light!important;
            }
        }

        // 下拉菜单
        .jee-dropdown{
            border-color: $jee-bg-light!important;
            border-bottom-left-radius: 0!important;
            border-bottom-right-radius: 0!important;
        }
        .el-dropdown-menu.el-popper{
            border-color: $jee-bg-light;
        }
        // 拖动放置区选中时
        .widget-view.active,.edit-box.active{
            border-color: $jee-bg-light;
            background-color: rgba($jee-bg-light, 0.19);
            border-radius: 4px;
        }
        // 进度条
        .el-progress .el-progress__text{
            color: $jee-bg-light;
        }
        // 选中色
        .el-input>.el-input__inner::selection{
          background-color: rgba($jee-bg-light, 0.19)!important;
        }
        // 内容模型拖拽相关
        .column-model-main-container .content-block-box {
          .content-block-left .model-left-box.active,
          .content-block-left .widget-view.active,
          .content-block-right .widget-view.active{
            border: 1px dashed $jee-bg-light!important;
            background-color: rgba($jee-bg-light, 0.19)!important;
          }
          .content-block-left .model-left-box.active,
          .content-block-left .widget-view.active{
            .el-input__inner,
            .el-input__count-inner,
            .el-textarea__inner,
            .el-input__count{
              background-color: transparent!important;
            }
          }

          .ghost_list_box.active .widget-view{
            border: 1px dashed $jee-bg-light!important;
            background-color: rgba($jee-bg-light, 0.19)!important;
            // background-color: #d5f4f8!important;
            &:hover{
              // background-color: transparent!important;
              .el-input__inner{
                background-color: transparent!important;
              }
            }
          }
          .content-block-left .dragging2 .model-left-box,
          .content-block-right .dragging2 .widget-view{
            border: 1px solid $jee-bg-light!important;
          }
          .content-block-left .dragging2 .model-left-box.active{
            background-color: #ffffff!important;
          }
          .ghost_list_box.dragging2 .widget-view{
            width: auto;
            background-color: #ffffff!important;
            border: 1px solid $jee-bg-light!important;
            box-sizing: border-box;
            display: inline-block;
          }
          .ghost_list{
            background-color: rgba($jee-bg-light, 0.19);
            &:after{
              border-left: 1px dashed $jee-bg-light;
            }
            &:before{
              color: $jee-bg-light;
              // background-color: rgba($jee-bg-light, 0.2);
            }
          }
        }
        .ghost_edit{
            background-color: rgba($jee-bg-light, 0.19);
            &:after{
                border-bottom: 1px dashed $jee-bg-light;
                // background-color: rgba($jee-bg-light, 0.19);
            }
            &:before{
                color: $jee-bg-light;
            }
        }
        .ghost-fallback{
            border: 1px solid $jee-bg-light;
        }
        .column-model-edit-container.content-detail-container{
            .content-block-box{
              .content-block-left{
                .model-left-box{
                  &:focus{
                    border-color: $jee-bg-light;
                  }
                  &:active{
                    border-color: $jee-bg-light;
                  }
                  &:focus-within{
                    border-color: $jee-bg-light;
                  }
                }
              }
            }
        }
        /* 智能表单侧边栏箭头颜色*/
        .edit-ques-config{
            .el-collapse-item__header{
                >i{
                    &:hover{
                        color:  $jee-bg-light;
                    }
                }
            }
        }

    }
}
